<template>
    <SideBar>
        <template #left>
            <PeopleStat></PeopleStat>
            <div style="padding: 20px 0;">
                <SmallTitle tips="小区人员类型分布统计">人员类型分布</SmallTitle>
                <div class="leixing-wrap">
                    <div class="leixing-item">
                        <img class="icon_leixing" src="../assets/images/icon_domicile.png">
                        <div class="domicile">
                            <span class="domicile_label">户籍(人)</span>
                            <span class="domicile_count">{{ domicileCount }}</span>
                        </div>
                        <div class="domicile_zb">
                            <span class="domicile_label">占比</span>
                            <span class="domicile_count">{{ domicileZb }}</span>
                        </div>
                    </div>
                    <div class="leixing-item">
                        <img class="icon_leixing" src="../assets/images/icon_floating.png">
                        <div class="domicile">
                            <span class="domicile_label">流动(人)</span>
                            <span class="domicile_count">{{ floatingCount }}</span>
                        </div>
                        <div class="domicile_zb">
                            <span class="domicile_label">占比</span>
                            <span class="domicile_count">{{ floatingZb }}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="car_lt_item" style="padding-bottom: 20px;">
                <SmallTitle tips="小区人员类型按住户所在楼栋统计">区域分布</SmallTitle>
                <div class="car_lt_echarts">
                    <CubeBarEcharts :seriesData="areaSeriesData" :xAxisData="areaXAxisData" :shapeColor="shapeColor">
                    </CubeBarEcharts>
                </div>
            </div>
            <div class="car_lt_item">
                <Headline>天气</Headline>
                <Weather></Weather>
            </div>
        </template>
        <template #right>
            <div class="car_rt">
                <Headline>行为分布</Headline>
                <div class="car_rt_echarts">
                    <PieEcharts3D :seriesData="behaviorData" :currentStep="currentStep"></PieEcharts3D>
                </div>
            </div>
            <div class="car_rb">
                <Headline>出行态势</Headline>
                <SmallTitle>私家车</SmallTitle>
                <div class="car_rb_echarts">
                    <LineEcharts :xAxisData="xAxisData" yUnit="次" :seriesData="privateSeriesData" tipLabel="出行次数"
                        areaColorFrom="rgba(65, 179, 255, 0.9)" areaColorTo="rgba(65, 179, 255, 0)"></LineEcharts>
                </div>
                <SmallTitle>公交车</SmallTitle>
                <div class="car_rb_echarts">
                    <LineEcharts :xAxisData="xAxisData" yUnit="次" :seriesData="publicSeriesData" tipLabel="出行次数"
                        areaColorFrom="rgba(83, 230, 177, 0.9)" areaColorTo="rgba(65, 179, 255, 0)"></LineEcharts>
                </div>
                <SmallTitle>步行</SmallTitle>
                <div class="car_rb_echarts">
                    <LineEcharts :xAxisData="xAxisData" yUnit="次" :seriesData="walkSeriesData" tipLabel="出行次数"
                        areaColorFrom="rgba(206, 206, 64, 0.9)" areaColorTo="rgba(245, 255, 65, 0)"></LineEcharts>
                </div>
                <SmallTitle>地铁</SmallTitle>
                <div class="car_rb_echarts">
                    <LineEcharts :xAxisData="xAxisData" yUnit="次" :seriesData="metroSeriesData" tipLabel="出行次数"
                        areaColorFrom="rgba(194, 132, 9, 0.9)" areaColorTo="rgba(194, 132, 9, 0)"></LineEcharts>
                </div>
            </div>
        </template>
    </SideBar>

</template>

<script setup>
import { onMounted, ref, getCurrentInstance, onUnmounted, watch } from 'vue';
import { getSimStat } from "@/api/car";
import { setIntervalExc } from "@/utils/index";
import { useStore } from '@/stores';
const store = useStore();
const { proxy } = getCurrentInstance();
const bus = proxy.$bus;

const areaSeriesData = ref([]);//区域分布
const areaXAxisData = ref([]);//区域分布X轴数据

const xAxisData = ref([]);//出行态势X轴数据
const privateSeriesData = ref([]);//私家车出行数据
const publicSeriesData = ref([]);//公交车出行数据
const walkSeriesData = ref([]);//步行出行数据
const metroSeriesData = ref([]);//地铁出行数据

const domicileCount = ref(0);//户籍人口数量
const floatingCount = ref(0);//流动人口数量
const domicileZb = ref(0);
const floatingZb = ref(0);
const currentStep = ref(0);


//#53E6B1>#28A5E3>#FFF68C>#C28409>#5270E5
// >#AA4327>#7FD909>#2B8E92>#7D53E6>#A83A6F
// >#7723D6>#AD2C2C
const behaviorNames = ['工作', '回家', '吃饭', '购物', '运动', '远行', '休闲娱乐', '睡觉', '就医', '处理琐事', '银行金融服务', '文化活动'];
const behaviorColors = [
    '#53E6B1', '#28A5E3', '#FFF68C', '#C28409', '#5270E5',
    '#AA4327', '#7FD909', '#2B8E92', '#7D53E6', '#A83A6F',
    '#7723D6', '#AD2C2C'
];
const behaviorData = ref([]);//行为分布

const shapeColor = {
    left: ['rgba(19, 255, 221, 0.5)', 'rgba(19, 255, 221, 0)'],
    right: ['#13FFDD', 'rgba(19, 255, 221, 0)'],
    top: ['#29F1FA', '#29F1FA'],
}
watch(() => store.population, (newValue, oldValue) => {
    init3dEchartsData(newValue);
}, {
    deep: true
});
onMounted(() => {
    initAreaData();
    store.setShowToolbar(false);
    store.setShowSidebar(true);
    bus.on("carPlaying", (args) => {
        carPlaying(args);
    });
})
onUnmounted(() => {
    bus.off('carPlaying');
});
function initAreaData() {
    for (let index = 1; index < 14; index++) {
        areaXAxisData.value.push(index + '栋');
    }
    areaSeriesData.value = [369, 554, 308, 290, 291, 281, 271, 462, 236, 246, 273, 414, 231];
}
const init3dEchartsData = (population) => {
    const total = population.person_num;
    domicileCount.value = population.registered_num;
    floatingCount.value = population.floating_num;
    domicileZb.value = ((domicileCount.value / total) * 100).toFixed(0) + '%';
    floatingZb.value = ((floatingCount.value / total) * 100).toFixed(0) + '%';
}
const carPlaying = (args) => {
    const simParam = {
        begin: args['step'],
        end: args['step'] + 1,
        interval: 1,
        num_points: args['step'],
        point_interval: 1,
    }
    currentStep.value = args['step'];
    const tablename = "casual_sim";
    setIntervalExc(args, () => {
        getSimStat(tablename, simParam).then(res => {
            if (res && res.length > 0) {
                const value = res[0];
                const step = value['step'];
                const travel_info = value['travel_info'];
                const person_info = value['person_info'];

                privateSeriesData.value = travel_info['car'];//私家车
                publicSeriesData.value = travel_info['bus'];//公交车
                walkSeriesData.value = travel_info['walk'];//步行
                metroSeriesData.value = travel_info['subway'];//地铁
                const tempXDatas = [];
                for (let index = 0; index < privateSeriesData.value.length; index++) {
                    tempXDatas.push(step + index);
                }
                xAxisData.value = tempXDatas;//出行态势X轴数据

                if (person_info) {
                    //行为分布
                    const behaviors = person_info['behavior_distribution'];
                    const behaviorArr = [];
                    for (let index = 0; index < behaviors.length; index++) {
                        behaviorArr.push({
                            "name": behaviorNames[index],
                            "value": Number(behaviors[index]),
                            "color": behaviorColors[index]
                        })
                    }
                    behaviorArr.sort((a, b) => b.value - a.value);
                    // behaviorArr.forEach((item, index) => {
                    //     item['color'] = behaviorColors[index];
                    // });
                    behaviorData.value = behaviorArr;
                }
            }
        });
    }, 3);
}
</script>


<style scoped lang="scss">
.car_lt_item {
    width: 100%;
    // padding-bottom: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .car_lt_echarts {
        width: 100%;
        flex: 1;
    }
}

.car_rt {
    width: 100%;
    height: 29.5%; //586/1989
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;

    .car_rt_echarts {
        width: 100%;
        flex: 1;
    }
}



.car_rb {
    width: 100%;
    height: 70%;
    display: flex;
    flex-direction: column;

    .car_rb_echarts {
        width: 100%;
        flex: 1;
    }
}

.leixing-wrap {
    display: flex;
    flex-direction: row;
    gap: 100px;
    padding-top: 20px;
}

.leixing-item {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.icon_leixing {
    width: 63.64px;
    height: 77px;
    margin-right: 20px;
}

.domicile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.domicile_zb {
    display: flex;
    flex-direction: column;
    margin-left: 30px;
    align-items: center;
    justify-content: space-between;
}

.domicile_count {
    font-size: 36px;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0em;
    color: #CFE7FA;
}

.domicile_label {
    font-size: 24px;
    font-weight: normal;
    line-height: normal;
    letter-spacing: 0em;
    color: #99C3E5;
}
</style>
